<template>
	<view class="box">
		<view class="top-box">
			<view class="search-box">
				<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @input="inputChange"
					cancelButton="none" radius="60" bgColor="#F7F7F7" placeholder="请输入关键词~">
				</uni-search-bar>
			</view>
			<view class="datelyBox" v-if="searchValue && RecommendList.length>0">
				<scroll-view scroll-y="true" style="height: 400rpx;">
					<view class="ListBox" v-for="(item,index) in RecommendList" :key="index"
						@click="setkeyword(item.title)">{{item.title}}</view>
				</scroll-view>
			</view>
		</view>
		<view class="search-list-val">
			<view class="list-val-1" v-for="(item,index) in latelySearch" :key="index" @click="toUrl(item)">
				{{item}}
			</view>
			<image :src="`${picUrl}/jh-1/del-2.png`" v-if="latelySearch.length!=0" @click="getValDel()"></image>
		</view>
		<view class="hot-search-list-val">
			<view class="lable">热门搜索</view>
			<view class="hot-search-list">
				<view class="hot-list-val-1" v-for="(item,index) in hotSearch" :key="index" @click="toUrl(item)">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				hotSearch: [],
				latelySearch: [],
				RecommendList: []
			}
		},
		onShow() {
			this.getHistory();
			this.getHotListData();
		},
		methods: {
			search() {
				this.setkeyword(this.searchValue)
			},
			inputChange() {
				this.getRecommend();
			},
			setkeyword(name) {
				this.saveHistory()
			},
			//历史搜索保存
			saveHistory() {
				console.log(this.searchValue == '')
				if (this.searchValue == '') {
					uni.showToast({
						title: "搜索不能为空",
						icon: "none"
					})
					return
				}
				this.$util.request({
					url: '/mobile/index.php?act=member_index&op=member_history_save',
					method: 'post',
					data: {
						history: this.searchValue
					},
				}).then((res) => {
					let text = this.searchValue
					uni.navigateTo({
						url: `/mall/goods/list?keyword=${text}`
					})
					console.log('已保存历史搜索')
				})
			},
			//热门搜索
			getHistory() {
				this.$util.request({
					url: '/mobile/index.php?act=search&op=hot_history',
					method: 'get',
					data: {},
				}).then((res) => {
					if (res.error_code == 0) {
						this.hotSearch = res.datas.hot;
					}
				})
			},
			//获取历史搜索列表
			getHotListData() {
				var that = this
				this.$util.request({
					url: '/mobile/index.php?act=member_index&op=member_history',
					method: 'get',
					data: {},
				}).then(function(res) {
					if (res.error_code == 0) {
						that.latelySearch = res.datas.history;
					}
				})
			},
			/**
			 * 获取推荐搜索
			 */
			getRecommend() {
				let that = this
				if (that.searchValue) {
					that.$util.request({
						url: '/mobile/index.php?act=search&op=aotocomplete',
						method: 'get',
						data: {
							"keyword": that.searchValue,
							share_phyid:41,
						},
					}).then(function(res) {
						if (res.error_code == 0) {
							that.RecommendList = res.datas.list
						}
					})
				}

			},
			//删除历史搜索
			getValDel() {
				this.$util.request({
					url: '/mobile/index.php?act=member_index&op=member_history_del',
					method: 'post',
					data: {},
				}).then((res) => {
					if (res.error_code == 0) {
						this.latelySearch = []
						this.getHotListData()
					}
				})

			},
			toUrl(name) {
				this.searchValue = name
				console.log(this.searchValue)
				this.setkeyword(this.searchValue)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #FFF;
	}

	.top-box {
		background: #FFFFFF;

		.search-box {
			background: #FFFFFF;
		}

		.top-list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 22rpx 44rpx;

			.tab-1 {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.tab-1-active {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #E96A1D;
				position: relative;
			}

			.tab-1-active::after {
				position: absolute;
				bottom: -4rpx;
				left: 20%;
				right: 20%;
				height: 2rpx;
				content: '';
				background: #E96A1D;
				border-radius: 6rpx;
			}
		}

		.datelyBox {
			background-color: #FFFFFF;
			position: absolute;
			top: 100rpx;
			padding: 10rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			z-index: 999999;
			border: 1rpx solid #EEEEEE;
			left: 30rpx;
			right: 30rpx;
		}

		.ListBox {
			border-bottom: 1rpx solid #EEEEEE;
			padding: 10rpx 20rpx;
			text-overflow: ellipsis;
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
		}
	}

	.search-list-val {
		padding: 20rpx 42rpx 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		position: relative;

		.list-val-1 {
			// width: 20%;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #909090;
			margin-bottom: 30rpx;
			margin-right: 5px;
			background-color: #F8F8F8;
			height: 33px;
			line-height: 33px;
			border-radius: 16px;
			padding: 0 12px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		image {
			width: 40rpx;
			height: 40rpx;

			position: absolute;
			bottom: 30rpx;
			right: 46rpx;
		}
	}

	.hot-search-list-val {
		padding: 10rpx 30rpx 0;

		.lable {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #323232;
		}

		.hot-search-list {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;

			.hot-list-val-1 {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				width: calc((100% - 90rpx) / 4);
				min-width: calc((100% - 90rpx) / 4);
				max-width: calc((100% - 90rpx) / 4);
				height: 60rpx;
				background: #F5F5F5;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;
				margin: 0 30rpx 20rpx 0;

				font-size: 24rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}

			.hot-list-val-1:nth-child(4n) {
				margin-right: 0;
			}
		}
	}
</style>